<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>就地编辑</title>
  </head>
  <body>
    <div id="signature"></div>

    <script src="edit_in_place.js"></script>
    <script>
      // 封装能力 函数， 类
      // js是单线程的 赶快把 同步任务执行完
      // 碰到耗时性的任务，先放入 event loop
      // setTimeout 事件监听 耗时性的任务(fetch) 查数据库
      const STORAGEKEY = 'signature';

      fetch('http://localhost:3000/users/1')
        .then((res) => res.json())
        .then((data) => {
          const { signature } = data;
          const stoSignature = localStorage.getItem(STORAGEKEY);
          if (signature !== stoSignature) {
            localStorage.setItem(STORAGEKEY, signature);
          }
          new EditInPlace(
            STORAGEKEY,
            document.getElementById('signature'),
            signature
          );
        });
    </script>
  </body>
</html>
